<template>
    <el-collapse v-model="activeName" accordion class="el-collapse">
        <el-collapse-item name="1">
            <template slot="title">
                <div style="margin-left: 5px">
                    <img
                        style="height: 30px; vertical-align: middle; margin-top: -2px"
                        src="@/assets/images/panel/trangle.png"
                        alt=""
                    />
                    风险监测
                </div>
            </template>
            <div class="detail-box">
                <div class="head-part">
                    <h3>中小河流洪水风险</h3>
                    <div>
                        <label>
                            <input type="radio" name="1" id="" v-model="value1" value="0" />
                            国家
                        </label>
                        <label>
                            <input type="radio" name="1" value="1" v-model="value1" id="" />
                            新疆
                        </label>
                    </div>
                </div>
                <div class="footer-part">
                    <div>
                        <p>阈值等级</p>
                        <ul>
                            <li
                                @click.stop="getThresholdLevel(item.id)"
                                tabindex="0"
                                class="list-item"
                                v-for="item in optionsLevel"
                                :key="item.id"
                            >
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                    <div>
                        <p>临界固定阈值</p>
                        <ul>
                            <li
                                @click.stop="getRiverThreshold"
                                tabindex="0"
                                class="list-item"
                                v-for="item in options1"
                                :key="item.id"
                            >
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                    <div class="river3">
                        <p>临界动态阈值</p>
                        <ul>
                            <li
                                tabindex="0"
                                class="list-item"
                                v-for="(color, index) in colors"
                                :key="index"
                                @click.stop="getRiverThreshold"
                            >
                                {{ getTimeIncrement(list1TimeIncrementIndex) + color }}
                            </li>
                        </ul>
                        <div
                            class="icon"
                            tabindex="0"
                            @click="cycleThroughTimeIncrements('list1')"
                            @keypress.enter="cycleThroughTimeIncrements('list1')"
                        >
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-box">
                <div class="head-part">
                    <h3>山洪灾害风险</h3>
                    <div>
                        <label>
                            <input type="radio" name="2" id="" v-model="value2" value="0" />
                            国家
                        </label>
                        <label>
                            <input type="radio" name="2" v-model="value2" value="1" id="" />
                            新疆
                        </label>
                    </div>
                </div>
                <div class="footer-part">
                    <div class="sh1">
                        <p>模型</p>
                        <ul>
                            <li
                                tabindex="0"
                                class="list-item"
                                v-for="item in shModel"
                                :key="item.id"
                                @click="getMountainTorrentsModel(item.id, item.name)"
                            >
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                    <div>
                        <p>临界固定阈值</p>
                        <ul>
                            <li
                                @click="getMountainTorrentsThreshold"
                                tabindex="0"
                                class="list-item"
                                v-for="item in options1"
                                :key="item.id"
                            >
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                    <div class="river3">
                        <p>临界动态阈值</p>
                        <ul>
                            <li
                                @click="getMountainTorrentsThreshold"
                                tabindex="0"
                                class="list-item"
                                v-for="(color, index) in colors"
                                :key="index"
                            >
                                {{ getTimeIncrement(list2TimeIncrementIndex) + color }}
                            </li>
                        </ul>
                        <div
                            class="icon"
                            tabindex="0"
                            @click="cycleThroughTimeIncrements('list2')"
                            @keypress.enter="cycleThroughTimeIncrements('list2')"
                        >
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                    <div>
                        <p>山洪灾害</p>
                        <ul>
                            <li tabindex="0" class="list-item" @click="getMountainTorrentsPicture">
                                防治区划图
                            </li>
                            <li tabindex="0" class="list-item" @click="getMountainTorrentsPicture">
                                隐患点分布图
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="detail-box">
                <div class="head-part">
                    <h3>地质灾害风险</h3>
                    <div>
                        <label>
                            <input type="radio" name="3" id="" v-model="value3" value="0" />
                            国家
                        </label>
                        <label>
                            <input type="radio" name="3" v-model="value3" value="1" id="" />
                            新疆
                        </label>
                    </div>
                </div>
                <div class="footer-part">
                    <div class="sh1">
                        <p>模型</p>
                        <ul>
                            <li
                                tabindex="0"
                                class="list-item"
                                v-for="item in dzModel"
                                :key="item.id"
                                @click="getGeologicalDisasterModel(item.id, item.name)"
                            >
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                    <div>
                        <p>临界固定阈值</p>
                        <ul>
                            <li
                                @click="getGeologicalDisasterThreshold"
                                tabindex="0"
                                class="list-item"
                                v-for="item in options1"
                                :key="item.id"
                            >
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                    <div>
                        <p>临界动态阈值</p>
                        <ul>
                            <li
                                @click="getGeologicalDisasterThreshold"
                                tabindex="0"
                                class="list-item"
                                v-for="(color, index) in colors"
                                :key="index"
                            >
                                {{ getTimeIncrement(list3TimeIncrementIndex) + color }}
                            </li>
                        </ul>
                        <div
                            class="icon"
                            tabindex="0"
                            @click="cycleThroughTimeIncrements('list3')"
                            @keypress.enter="cycleThroughTimeIncrements('list3')"
                        >
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                    <div class="">
                        <p>地质灾害</p>
                        <ul>
                            <li
                                v-for="(item, index) in displayedItems"
                                :key="index"
                                tabindex="0"
                                class="list-item"
                                @click.stop="getGeologicalDisasterPicture"
                            >
                                {{ item }}
                            </li>
                        </ul>
                        <div class="icon" tabindex="0" @click="nextItems">
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </el-collapse-item>
        <el-collapse-item name="2">
            <template slot="title">
                <div style="margin-left: 5px">
                    <img
                        style="height: 30px; vertical-align: middle; margin-top: -2px"
                        src="@/assets/images/panel/trangle.png"
                        alt=""
                    />
                    风险预警
                </div>
            </template>
            <div class="fxyj-form">
                <el-form
                    ref="form"
                    label-position="left"
                    size="mini"
                    :model="yjform"
                    label-width="80px"
                >
                    <el-form-item label="预警日期 :">
                        <el-date-picker
                            style="width: 100%; position: absolute; z-index: 99999999999"
                            v-model="yjform.yjdate"
                            type="date"
                            placeholder="选择日期"
                            default-time="12:00:00"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="预警时次 :">
                        <el-select
                            style="width: 100%"
                            v-model="yjform.ntimes"
                            placeholder="请选择预警时次"
                        >
                            <el-option label="08" value="08"></el-option>
                            <el-option label="20" value="20"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预警类型 :">
                        <el-radio-group v-model="yjform.yjType">
                            <el-radio label="中小河流流域洪水风险预警"></el-radio>
                            <el-radio label="地质灾害气象风险预警"></el-radio>
                            <el-radio label="山洪灾害气象风险预警"></el-radio>
                            <el-radio label="水库暴雨洪水风险预警"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="预警模型 :">
                        <el-checkbox-group v-model="yjform.mx">
                            <el-checkbox label="国家1代模型"></el-checkbox>
                            <el-checkbox label="国家2代模型"></el-checkbox>
                            <el-checkbox label="精细化模型"></el-checkbox>
                            <el-checkbox label="潜势度模型"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="图像类型 :">
                        <el-radio v-model="yjform.imgtype" value="1" label="1">网格</el-radio>
                        <el-radio v-model="yjform.imgtype" value="2" label="2">图形</el-radio>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <!-- <div style="display: flex; justify-content: space-between">
							<el-button size="small" style="width: 100px" plain type="primary"
								@click="onSubmit('预警分析') ">预警分析</el-button>
							<el-button size="small" style="width: 100px" plain type="primary"
								@click="onSubmit('网格修改')">网格修改</el-button>
							<el-button size="small" style="width: 100px" type="primary" @click="onSubmit('分析成图')"
								plain>分析成图</el-button>
						</div> -->
                        <ul
                            style="
                                display: flex;
                                justify-content: space-around;
                                list-style: none;
                                padding: 0;
                            "
                        >
                            <li
                                :class="dialogActive === index ? 'active' : ''"
                                @click="changeTab(item, index)"
                                style="
                                    width: 100px;
                                    height: 34px;
                                    text-align: center;
                                    line-height: 34px;
                                    background-color: #3c6485;
                                    color: #fff;
                                "
                                v-for="(item, index) in ['预警分析', '修改预警区', '手动绘图']"
                                :key="index"
                            >
                                {{ item }}
                            </li>
                        </ul>
                    </el-form-item>
                </el-form>
            </div>
            <div style="border: 1px solid #284f6e; margin-bottom: 18px"></div>
            <!-- <div style="display: flex; justify-content: space-between"> -->
            <!-- <el-button size="small" style="width: 100px" type="primary" @click="onSubmit" plain>绘区确认</el-button>
				<el-button size="small" style="width: 100px" plain type="primary" @click="onSubmit">预警区刷新</el-button>
				<el-button size="small" style="width: 100px" plain type="primary" @click="onSubmit">产品制作</el-button>
				<el-button size="small" style="width: 100px" type="primary" plain @click="onSubmit">预警发布</el-button> -->
            <ul style="display: flex; justify-content: space-around; list-style: none; padding: 0">
                <li
                    :class="dialogActive1 === index ? 'active' : ''"
                    @click="changeTab1(item, index)"
                    style="
                        width: 80px;
                        height: 34px;
                        text-align: center;
                        line-height: 34px;
                        background-color: #3c6485;
                        color: #fff;
                    "
                    v-for="(item, index) in ['预警区分析', '预警词', '产品制作', '预警发布']"
                    :key="index"
                >
                    {{ item }}
                </li>
            </ul>
            <!-- </div> -->
        </el-collapse-item>
        <div class="jcTitle" v-show="jcTitleShow">{{ jcTitle }}</div>
        <div class="jcLegend" v-show="jcLegendShow">
            \
            <div class="legend-item" v-for="(item, index) in legendItems" :key="index">
                <div class="legend-text">{{ item.text }}</div>
                <div class="legend-color" :style="{ backgroundColor: item.color }"></div>
            </div>
        </div>

        <!-- 预警区刷新小弹窗 -->
        <div class="yjqsx-dialog dialog-box" v-if="yjqfxShow">
            <div class="title">
                <h3>
                    <img
                        style="height: 30px; vertical-align: middle"
                        src="@/assets/images/panel/trangle.png"
                        alt=""
                    />
                    预警区分析
                </h3>
                <span @click="onClose" class="closeDialog">X</span>
            </div>
            <div class="table-box">
                <el-table
                    :data="yjList"
                    class="yjTable"
                    style="height: 180px; background-color: rgba(51, 117, 153, 0.773)"
                    border
                    :show-header="true"
                    element-loading-background="rgba(51, 117, 153, 0.773)"
                >
                    <el-table-column prop="town" label="行政区划" width="180"></el-table-column>
                    <el-table-column prop="type" label="风险等级" width="180"></el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 网格修改 -->
        <div class="wgxg-dialog dialog-box" v-if="yjqdjShow">
            <div class="title">
                <h3>
                    <img
                        style="height: 30px; vertical-align: middle"
                        src="@/assets/images/panel/trangle.png"
                        alt=""
                    />
                    修改预警区
                </h3>
                <span @click="onClose" class="closeDialog">X</span>
            </div>
            <div class="main-box">
                <ul>
                    <li class="drawButton" style="background-color: red" @click="allGridArea(3)">
                        红色
                    </li>
                    <li class="drawButton" style="background-color: orange" @click="allGridArea(2)">
                        橙色
                    </li>
                    <li
                        class="drawButton"
                        style="background-color: yellow; color: #000"
                        @click="allGridArea(1)"
                    >
                        黄色
                    </li>
                    <li class="drawButton" style="background-color: blue" @click="allGridArea(0)">
                        蓝色
                    </li>
                </ul>
                <div class="btn">
                    <button @click="draw">修改</button>
                    <button @click="clearDraw">清除</button>
                </div>
            </div>
        </div>
        <!-- 分析成图 -->
        <div class="fxct-dialog dialog-box" v-if="showSd">
            <div class="title">
                <h3>
                    <img
                        style="height: 30px; vertical-align: middle"
                        src="@/assets/images/panel/trangle.png"
                        alt=""
                    />
                    手动绘图
                </h3>
                <span @click="onClose" class="closeDialog">X</span>
            </div>
            <div class="main-box">
                <ul>
                    <li class="drawButton" style="background-color: red" @click="allGridArea(3)">
                        红色
                    </li>
                    <li class="drawButton" style="background-color: orange" @click="allGridArea(2)">
                        橙色
                    </li>
                    <li
                        class="drawButton"
                        style="background-color: yellow; color: #000"
                        @click="allGridArea(1)"
                    >
                        黄色
                    </li>
                    <li class="drawButton" style="background-color: blue" @click="allGridArea(0)">
                        蓝色
                    </li>
                </ul>
                <div class="btn">
                    <button @click="draw">分析成图</button>
                    <button @click="clearDraw">清除</button>
                </div>
            </div>
        </div>
        <!-- 预警词小弹窗 -->
        <div class="yjc-dialog dialog-box" v-if="mbxgShow">
            <div class="title">
                <h3>
                    <img
                        style="height: 30px; vertical-align: middle"
                        src="@/assets/images/panel/trangle.png"
                        alt=""
                    />
                    预警词
                </h3>
                <span @click="onClose" class="closeDialog">X</span>
            </div>
            <div class="table-box">
                <div class="panel">
                    <el-input
                        type="textarea"
                        :rows="5"
                        placeholder="请输入图片信息内容"
                        v-model="textarea"
                    ></el-input>
                    <!-- <div style="padding-top: 0.2rem; display: flex; flex-direction: row">
            <p>文本位置：</p>
            <el-input
              v-model="textLonLat"
              readonly="readonly"
              placeholder="经度,纬度"
              style="width: 15rem; padding-top: 0.5rem; margin-right: 1rem"
            ></el-input>
            <el-button
              class="fill-btn"
              style="width: 10rem; height: 4rem"
              @click="textLocation"
            >
              设置文本位置</el-button
            >
          </div> -->
                    <div
                        style="
                            padding-top: 0.2rem;
                            display: flex;
                            flex-direction: row;
                            font-size: 0.8rem;
                        "
                    >
                        <div
                            style="color: white; font-size: 0.8rem; width: 4rem; line-height: 3rem"
                        >
                            文本宽度:
                        </div>
                        <div style="padding-top: 0.5rem">
                            <el-input
                                v-model="textWidth"
                                placeholder="请输入文本宽度"
                                style="width: 4rem"
                            ></el-input>
                        </div>

                        <div style="width: 2rem; padding-top: 0.5rem; padding-left: 1rem">
                            <el-button class="fill-btn" style="width: 4rem" @click="imginfo">
                                预览图片
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-collapse>
</template>

<script>
import {
    getyjGrid,
    dqyjGrid,
    getyjPolygon,
    dqyjGridArea,
    getRiverJson,
    getyjImg,
    getyjProduct,
    yjfbProduct,
    getyjArea,
    getThreshold,
    yjAnalyse,
    updateGrid,
    sdupdateGrid,
} from '@/api/yjfx';

//风险监测
import {
    //地质灾害阈值或者固定值
    geologicalDisasterThreshold,
    //山洪灾害风险
    mountainTorrentsThreshold,
    //中小河流风险
    riverThreshold,
    //地质灾害
    geologicalDisasterPicture,
    mountainTorrentsPicture,
    mountainTorrentsModel,
    geologicalDisasterModel,
    thresholdLevel,
} from '@/api/yjfx';
//turf
import * as turf from '@turf/turf';
//预警数据
import yjgridData from '@/map/grid.json';
//新疆的区域数据
import xinjiangArea from '@/map/新疆.json';
import yjpolygonData from '@/map/预警分析.json';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import JSONData from '/src/map/新疆.json';
import { Image } from 'ol/layer';
import { ImageStatic } from 'ol/source';
import moment from 'moment';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import { Circle, Fill, Style } from 'ol/style';
export default {
    data() {
        return {
            items: ['隐患点分布图', '滑坡崩塌易发程度区划图', '泥石流易发程度区划图'],
            textarea:
                '根据未来24小时降雨预报及前期实际降雨量分析,请当地政府及相关单位做好地质灾害防范工作。',
            jcLegendShow: false,
            legendItems: [
                { text: '有一定风险', color: '#0000FF' },
                { text: '风险较高', color: '#FFFF00' },
                { text: '风险高', color: '#FFA500' },
                { text: '风险很高', color: '#FF0000' },
            ],
            textWidth: 60000,
            currentIndex: 0,
            itemsToShow: 2, // 每次展示的项数
            currentTimeIncrementIndex: 0, // 当前时间增量的索引
            timeIncrements: [1, 3, 6, 24], // 时间增量数组
            colors: ['蓝', '黄', '橙', '红'], // 颜色数组
            list1TimeIncrementIndex: 0,
            list2TimeIncrementIndex: 0,
            list3TimeIncrementIndex: 0,
            activeName: '1',
            active: 0,
            jcTitle: '滑坡崩塌易发程度区划图',
            jcTitleShow: false,
            optionsLevel: [
                {
                    id: 1,
                    name: '红',
                },
                {
                    id: 2,
                    name: '橙',
                },
                {
                    id: 3,
                    name: '黄',
                },
                {
                    id: 4,
                    name: '蓝',
                },
            ],
            shModel: [
                {
                    id: 1,
                    name: 'EFI指数模型',
                },
                {
                    id: 2,
                    name: 'FFPI指数模型',
                },
                {
                    id: 3,
                    name: '百分位数模型',
                },
            ],
            dzModel: [
                {
                    id: 1,
                    name: '雨量阈值模型',
                },
                {
                    id: 2,
                    name: '百分位数模型',
                },
                {
                    id: 3,
                    name: '逻辑回归模型',
                },
            ],
            options1: [
                {
                    id: 1,
                    name: '24h',
                },
                {
                    id: 2,
                    name: '6h',
                },
                {
                    id: 3,
                    name: '3h',
                },
                {
                    id: 4,
                    name: '1h',
                },
            ],
            options2: [
                { id: 1, name: '1h蓝' },
                { id: 2, name: '1h黄' },
                { id: 3, name: '1h橙' },
                { id: 4, name: '1h红' },
                { id: 5, name: '3h蓝' },
                { id: 6, name: '3h黄' },
                { id: 7, name: '3h橙' },
                { id: 8, name: '3h红' },
                { id: 9, name: '6h蓝' },
                { id: 10, name: '6h黄' },
                { id: 11, name: '6h橙' },
                { id: 12, name: '6h红' },
                { id: 13, name: '24h蓝' },
                { id: 14, name: '24h黄' },
                { id: 15, name: '24h橙' },
                { id: 16, name: '24h红' },
            ],
            value1: 0,
            value2: 0,
            value3: 0,
            yjform: {
                yjType: '地质灾害气象风险预警', // 设置默认选中的值
                mx: ['国家1代模型'],
                imgtype: '2',
                ntimes: '08',
                yjdate: new Date(),
            },
            yjqfxShow: false,
            yjqdjShow: false,
            mbxgShow: false,
            showSd: false,
            dialogActive: '',
            dialogActive1: '',
            qxfxyjLayer: null,
            yjProductForm: new FormData(),
            yjList: [
                { town: '乌鲁木齐市', type: '较高' },
                { town: '克拉玛依市', type: '高' },
                { town: '吐鲁番市', type: '高' },
                { town: '哈密市', type: '较高' },
                // 更多项...
            ],
            YJMap: null,

            imageUrl: null,
            //预警区域
            gridArea: null,

            sdgridArea: [],
            sdzfgridArea: '',
            sdzfgridAreaArr: [],
            sdzfgridAreaBf: '',
            drawing: false,
            //判断绘制类型
            drawType: '',
            //预警词
            textLonLat: '',
            drawpoint: '',
            sdgridAreaVectorLayer: null,

            //颜色对应的level
            levelWithColor: [
                {
                    key: '蓝',
                    value: 1,
                    engKey: '#0000FF',
                },
                {
                    key: '黄',
                    value: 2,
                    engKey: '#FFFF00',
                },
                {
                    key: '橙',
                    value: 3,
                    engKey: '#FFA500',
                },
                {
                    key: '红',
                    value: 4,
                    engKey: '#FF0000',
                },
            ],
        };
    },
    mounted() {
        this.YJMap = this.$store.getters.Map;
        // this.getRiverJson();
        this.CreateLayer();
        this.expandSecondPanel();
    },
    computed: {
        timeLabels() {
            // 根据当前时间增量生成列表项内容
            return this.colors.map((color, index) => {
                return `1h${this.timeIncrements[this.currentTimeIncrementIndex]}${color}`;
            });
        },
        displayedItems() {
            return this.items.slice(this.currentIndex, this.currentIndex + this.itemsToShow);
        },
    },
    methods: {
        nextItems() {
            this.currentIndex += this.itemsToShow;
            // 如果超出范围，则重置为 0
            if (this.currentIndex >= this.items.length) {
                this.currentIndex = 0;
            }
        },
        //地质灾害风险模型
        getGeologicalDisasterModel(id, name) {
            
            let color = this.levelWithColor[3 - id].engKey;
            let geologicalDisasterModelType = '';
            if (id == '1') geologicalDisasterModelType = 'GEO-THR';
            if (id == '2') geologicalDisasterModelType = 'GEO-PREC';
            if (id == '3') geologicalDisasterModelType = 'GEO-LOG';
            this.jcLegendShow = true;
            this.jcTitleShow = true;
            if (id == '1' || id == '3') {
             
                const area = turf.polygon(xinjiangArea.features[0].geometry.coordinates);
                geologicalDisasterModel(geologicalDisasterModelType).then(res => {
                    console.log(res, '地质灾害风险模型');
                    const source = new VectorSource({});
                    res.data.list.length &&
                        res.data.list.forEach(item => {
                            this.jcTitle = `${res.data.time}${name}`;
                            const flag = turf.booleanPointInPolygon(
                                turf.point([item.latitude, item.longitude]),
                                area
                            );
                            if (item.parameter3 == 1) return;
                            let color = this.levelWithColor[5 - item.parameter3].engKey;
                            console.log(
                                item.latitude,
                                item.longitude,
                                item.parameter3,
                                color,
                                'GeologicalDisasterModelcolor'
                            );
                            const feature = new Feature({
                                geometry: new Point([item.latitude, item.longitude]),
                            });
                            for (let key in item) {
                                feature.set(key, item[key]);
                            }
                            feature.setStyle(
                                new Style({
                                    image: new Circle({
                                        fill: new Fill({
                                            color: color,
                                        }),
                                        radius: 10,
                                    }),
                                })
                            );
                            source.addFeature(feature);
                        });
                    const layer = new VectorLayer({
                        source,
                        zIndex: 20,
                        name: '风险预警-风险监测-阈值等级',
                    });
                    const map = this.$store.getters.Map.map;
                    const targetLayer = map
                        .getAllLayers()
                        .find(item => item.get('name') == '风险预警-风险监测-阈值等级');
                    if (targetLayer) {
                        map.removeLayer(targetLayer);
                    }
                    map.addLayer(layer);
                });
            } else {
                const map = this.$store.getters.Map.map;
                geologicalDisasterModel(geologicalDisasterModelType).then(res => {
                    this.jcTitle = `${res.data.time}${name}`;
                const url = res.data.url;
                const imageLayer = new Image({
                    source: new ImageStatic({
                        url: url,
                        imageExtent: [73, 10, 135, 53],
                    }),
                    zIndex: 20,
                    name: '风险监测-地质灾害-模型图',
                });
                const targetLayer = map
                    .getAllLayers()
                    .find(item => item.get('name') == '风险监测-地质灾害-模型图');
                if (targetLayer) {
                    map.removeLayer(targetLayer);
                }
                map.addLayer(imageLayer);
                return;
            }
                )}
        },
        //阈值等级
        getThresholdLevel(id) {
            this.jcTitleShow = false;
            this.jcLegendShow = false;
            let color = this.levelWithColor[4 - id].engKey;
            let riverLevel = '';
            if (id == '1') riverLevel = 'RED';
            if (id == '2') riverLevel = 'ORANGE';
            if (id == '3') riverLevel = 'YELLOW';
            if (id == '4') riverLevel = 'BLUE';
            const area = turf.polygon(xinjiangArea.features[0].geometry.coordinates);
            thresholdLevel(riverLevel).then(res => {
                console.log(res.data.list, '阈值等级');
                const source = new VectorSource({});
                res.data.list.length &&
                    res.data.list.forEach(item => {
                        const flag = turf.booleanPointInPolygon(
                            turf.point([item.latitude, item.longitude]),
                            area
                        );
                        if (!flag) {
                            return;
                        }
                        console.log(item.latitude, '阈值等级item.latitude');
                        const feature = new Feature({
                            geometry: new Point([item.latitude, item.longitude]),
                        });
                        for (let key in item) {
                            feature.set(key, item[key]);
                        }
                        feature.setStyle(
                            new Style({
                                image: new Circle({
                                    fill: new Fill({
                                        color: color,
                                    }),
                                    radius: 5,
                                }),
                            })
                        );
                        source.addFeature(feature);
                    });
                const layer = new VectorLayer({
                    source,
                    zIndex: 20,
                    name: '风险预警-风险监测-阈值等级',
                });
                const map = this.$store.getters.Map.map;
                const targetLayer = map
                    .getAllLayers()
                    .find(item => item.get('name') == '风险预警-风险监测-阈值等级');
                if (targetLayer) {
                    map.removeLayer(targetLayer);
                }
                map.addLayer(layer);
            });
        },
        getMountainTorrentsModel(id, name) {
            let mountainTorrentsModelType = '';
            if (name == 'EFI指数模型') {
                mountainTorrentsModelType = 'FF_EFI';
            }
            if (name == 'FFPI指数模型') {
                mountainTorrentsModelType = 'FF-FFPI';
            }
            if (name == '百分位数模型') {
                mountainTorrentsModelType = 'FF-PREC';
            }
            this.jcTitleShow = true;
            this.jcLegendShow = true;
            if (name == 'EFI指数模型' || name == '百分位数模型') {
                const area = turf.polygon(xinjiangArea.features[0].geometry.coordinates);
                mountainTorrentsModel(mountainTorrentsModelType).then(res => {
                   
                    this.jcTitle = `${res.data.time}${name}`;

                    console.log(res, 'MountainTorrentsModel');

                    const source = new VectorSource({});
                    res.data.list.length &&
                        res.data.list.forEach(item => {
                            let color = this.levelWithColor[4 - item.parameter3].engKey;
                            console.log(
                                item.latitude,
                                item.longitude,
                                item.parameter3,
                                color,
                                'MountainTorrentsModelcolor'
                            );
                            const flag = turf.booleanPointInPolygon(
                                turf.point([item.latitude, item.longitude]),
                                area
                            );
                            // if (!flag) {
                            //     return;
                            // }
                            const feature = new Feature({
                                geometry: new Point([item.latitude, item.longitude]),
                            });
                            for (let key in item) {
                                feature.set(key, item[key]);
                            }
                            feature.setStyle(
                                new Style({
                                    image: new Circle({
                                        fill: new Fill({
                                            color: color,
                                        }),
                                        radius: 5,
                                    }),
                                })
                            );
                            source.addFeature(feature);
                        });
                    const layer = new VectorLayer({
                        source,
                        zIndex: 20,
                        name: '风险预警-风险监测-中小河流洪水风险',
                    });
                    const map = this.$store.getters.Map.map;
                    const targetLayer = map
                        .getAllLayers()
                        .find(item => item.get('name') == '风险预警-风险监测-EFI指数模型');
                    if (targetLayer) {
                        map.removeLayer(targetLayer);
                    }
                    map.addLayer(layer);
                });
            } else {
                const map = this.$store.getters.Map.map;
                mountainTorrentsModel(mountainTorrentsModelType).then(res => {
                    this.jcTitle = `${res.data.time}${name}`;
                const url = res.data.url;
               
                const imageLayer = new Image({
                    source: new ImageStatic({
                        url: url,
                        imageExtent: [73, 10, 135, 53],
                    }),
                    zIndex: 20,
                    name: '风险监测-山洪灾害-模型图',
                });
                const targetLayer = map
                    .getAllLayers()
                    .find(item => item.get('name') == '风险监测-山洪灾害-模型图');
                if (targetLayer) {
                    map.removeLayer(targetLayer);
                }
                map.addLayer(imageLayer);
                return;
            }
                )}
        },
        showRiverThreshold() {
            getThreshold().then(res => {
                console.log(res.data, 'getThreshold');
                res.data.forEach(item => {
                    // 	if(item.value){
                    // 		this.YJMap.marker.addMarker(
                    //     item.latitude || item.center[0],
                    //     item.longitude || item.center[1],
                    //     this.qxfxjcLayer,
                    //     {
                    //         //imgUrl: require(`../assets/lenged/${legendType}.png`),
                    //         //scale: 1.5, //大小
                    //         radius: 15,
                    //         pBorderColor: '#000000',
                    //         pBorderWidth: 1,
                    //         pFillColor: '',
                    //     },
                    //     item
                    // );
                    // 	}
                });
            });
        },
        getRiverJson() {
            getRiverJson().then(res => {
                console.log(res.features, 'getRiverJson');
                // let features = this.YJMap.format.converGeoJsonToFeature(res.data); //json转feature
                this.YJMap.layer.createAreaLineLayer(res);
            });
        },

        getTimeIncrement(index) {
            // 获取当前时间增量的字符串表示
            return `${this.timeIncrements[index]}h`;
        },
        cycleThroughTimeIncrements(listName) {
            // 循环切换指定列表的时间增量
            const lists = {
                list1: 'list1TimeIncrementIndex',
                list2: 'list2TimeIncrementIndex',
                list3: 'list3TimeIncrementIndex',
            };

            this[lists[listName]] = (this[lists[listName]] + 1) % this.timeIncrements.length;
            console.log(this[lists[listName]], 'this[lists[listName]]');
        },

        expandSecondPanel() {
            this.activeName = '1';
            this.$nextTick(() => {
                // 这里的代码会在 DOM 更新后执行
                console.log('DOM has been updated');
            });
        },
        //创建图层
        CreateLayer() {
            this.qxfxyjLayer = this.YJMap.layer.createVectorLayer('qxfxyjLayer');
            this.qxfxjcLayer = this.YJMap.layer.createVectorLayer('qxfxjcLayer');
            //------------添加手动绘制图层
            if (this.sdgridAreaVectorLayer == null) {
                this.sdgridAreaVectorLayer = new VectorLayer({
                    source: new VectorSource(),
                    zIndex: 15,
                });
                this.sdgridAreaVectorLayer.set('layerName', '手动绘制图层');
                this.YJMap.map.addLayer(this.sdgridAreaVectorLayer);
            }
        },
        // 产品制作
        async getYjProduct() {
            console.log('产品制作');
            let formData = new FormData();
            let yjimg = await getyjImg().then(res => {
                console.log(res, 'YJimage');
                console.log(typeof res, 'YJimage11');
                if (res.data instanceof Blob) {
                    console.log('数据类型是Blob');
                    // 处理Blob对象的代码
                } else {
                    console.log('数据类型不是Blob');
                    // 处理其他类型数据的代码
                }
                let data = this.gridArea;
                let posStr = '';

                console.log('res.data', res.data, 'YJimage1111111111');
                return res;
            });

            //   formData.append("layerName", "");
            //   formData.append("posStr", posStr);
            //   formData.append("dlData", JSON.stringify(data));
            console.log(yjimg.data, 'YJimage@@@@@@@@@@@@');
            let colorAndPos = yjpolygonData.data;
            const dateNow = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
            console.log(dateNow, 'dateNow');
            let data = this.gridArea;
            let posStr = '';

            data.forEach(item => {
                posStr += item.level;
                posStr += '#';
                posStr += item.pos.join(',');
                posStr += '*';
                colorAndPos.push({
                    color: item.level,
                    pos: item.points,
                });
            });
            let file = new File([yjimg.data], 'YJimage', { type: yjimg.type });
            console.log(yjimg.data, 'YJimage@@@@@@@@@@@@');
            this.yjProductForm.append('sXType', '短期预警');
            this.yjProductForm.append('images', file, 'YJimage');
            this.yjProductForm.append('issueNum', Number(10));
            this.yjProductForm.append('userName', '650000');
            this.yjProductForm.append('yjType', '风险预警');
            this.yjProductForm.append('date', dateNow);
            this.yjProductForm.append('timeChar', 20);
            this.yjProductForm.append('nTimes', 24);
            this.yjProductForm.append('layerName', '');
            this.yjProductForm.append('posStr', posStr);
            this.yjProductForm.append('colorAndPos', JSON.stringify(colorAndPos));
            // this.yjProductForm.append('type', 1); //0为临灾,1为短期
            this.yjProductForm.append('dlData', JSON.stringify(data));
            let typeValue = this.yjProductForm.get('type');
            this.yjProductForm.append('type', Number(1)); //0为临灾,1为短期
            this.yjProductForm.forEach((value, key) => {
                console.log(key, value, 'key value');
            });
            console.log(this.yjProductForm, 'YJimage@@@@@@@@@@@@@111');
            let res = await getyjProduct(this.yjProductForm);
            // 创建Blob对象
            const fileBlob = new Blob([res.data], {
                type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
            });
            // 创建URL
            const fileUrl = URL.createObjectURL(fileBlob);
            console.log(fileUrl, 'fileUrl---------');
            // 创建a标签
            const a = document.createElement('a');
            a.href = fileUrl;
            a.download = 'dzyjwd.docx';
            // 模拟点击a标签，实现文件下载
            a.click();
            return res;
        },
        //预警分析
        yjAnalysis() {
            console.log('预警分析');
            if (this.yjform.imgtype == '1') {
                //网格显示
                let obj = this.addGrid();
                console.log(obj, 'obj');
            } else {
                //图形
                this.addPolygon();
            }
        },
        //添加网格
        //网格
        addGrid() {
            let example = `?methodName=hnshfxshort&postdata=xinjiang|grid|dzdq20240617200000`;
            getyjGrid(example).then(res => {
                let points = res.data;
                console.log(points, 'grid');
                let item = points;
                console.log(item.lon.length, '网格点');
                //this.filterPointsByStep()
                for (let i = 0; i < item.lon.length; i++) {
                    if (item?.lon[i] && item?.lat[i]) {
                        this.YJMap.marker.addText([item.lon[i], item.lat[i]], this.qxfxyjLayer, {
                            name: `${item.val[i] ? item.val[i] : ''}`,
                            fillColor: '#ffffff',
                            font: 'normal 12px 微软雅黑',
                            offsetX: 0,
                            offsetY: 0,
                        });
                    }
                }
            });
        },
        //图形
        addPolygon() {
            let example = `?methodName=hnshfxshort&postdata=xinjiang|2024-06-17 20:00:00|5km`;
            // this.mapLoading = true;

            getyjPolygon(example).then(res => {
                console.log('yjAnalysis', yjpolygonData);
                let polygons = res.data.map(item => {
                    let pos = [];
                    let points = item.posArr.map(item => {
                        pos.push(item.lon + ' ' + item.lat);
                        return [item.lon, item.lat];
                    });
                    return {
                        codenumber: item.codenumber,
                        color: item.color,
                        level: item.level,
                        points: points,
                        pos: pos, //预警区分析区域点集
                        type: 0, //预警区分析type
                        lon: item.lon,
                        lat: item.lat,
                    };
                });
                // console.log(polygons, "polygons");
                // console.log(res.data, "polygons222222222222");
                this.gridArea = polygons;
                this.YJMap.layer.addGridArea(polygons);
            });
        },
        changeTab(type, index) {
            this.dialogActive = index;
            this.yjqfxShow = false;
            this.yjqdjShow = false;
            this.showSd = false;
            if (type === '预警分析') {
                this.yjAnalysis();
            }
            if (type === '修改预警区') {
                this.yjqdjShow = !this.yjqdjShow;
            }
            if (type === '手动绘图') {
                this.showSd = !this.showSd;
            }
        },
        changeTab1(item, index) {
            this.dialogActive1 = index;
            if (item === '产品制作') {
                this.yjqfxShow = false;
                this.getYjProduct();
            }
            if (item === '预警区分析') {
                this.getYjqfx();
            }
            if (item === '预警发布') {
                this.yjqfxShow = false;
                this.fbyjProduct();
            }
            if (item == '预警词') {
                this.mbxgShow = true;
            }
        },
        getYjqfx() {
            if (this.gridArea && this.gridArea.length > 0) {
                console.log(this.gridArea, 'this.gridArea');
                // let arr = this.getRandomArrayElements(this.gridArea, 5);
                let arr = this.gridArea;
                yjAnalyse({
                    type: 0, //预警类型
                    yjqDtoList: arr,
                    areaCode: '650000',
                }).then(res => {
                    console.log(res, '预警区分析');

                    this.yjList = res.data;
                    console.log(this.yjList, '预警区分析');
                    this.yjqfxShow = !this.yjqfxShow;
                    let yjgroup = {};
                    res.data.forEach(item => {
                        console.log(item, 'data');
                        let type = item.type;
                        if (!yjgroup[type]) {
                            yjgroup[type] = [];
                        }
                        // 将乡镇添加到对应的预警类型数组中
                        yjgroup[type].push(item.town);
                    });

                    // 构建最终的数据结构
                    let finalData = Object.keys(yjgroup).map(type => ({
                        type,
                        towns: yjgroup[type], // 这里存储的是乡镇数组
                    }));
                    console.log(finalData, 'finalData');
                    // text = text + `${data.county}-${data.town}(${data.type}),`;
                    //将finalData转化为每个预警类型的字符串
                    if (finalData.length > 0) {
                        let YjText = '';
                        finalData.forEach(data => {
                            YjText += this.getTemplate(data);
                        });

                        this.textarea = `根据未来24小时降雨预报及前期实际降雨量分析,${YjText},请当地政府及相关单位做好地质灾害防范工作。`;
                        console.log(this.textarea, 'YjText');
                        this.listLoading = false;
                    }
                });
            } else {
                this.$message.warning('请先进行预警分析');
            }
        },
        //预警词模板
        getTemplate(yjdata) {
            let Text = '';
            const { type, towns } = yjdata;
            // console.log(type, county, "type,county");
            if (type == '风险较大') {
                // 遍历county对象并构建字符串
                let townStrings = Object.entries(towns).map(townname => {
                    // 构建town的字符串表示
                    return `${townname} `;
                });
                Text = `${townStrings.join('、')}降雨引发地质突害的可能性较大(黄色预警)`;
            } else if (type == '风险大') {
                // 遍历county对象并构建字符串
                let townStrings = Object.entries(towns).map(townname => {
                    // 构建town的字符串表示
                    return `${townname} `;
                });
                Text = `${townStrings.join('、')}降雨引发地质突害的可能性大(橙色预警)`;
            } else if (type == '风险极大') {
                // 遍历county对象并构建字符串
                let townStrings = Object.entries(towns).map(townname => {
                    // 构建town的字符串表示
                    return `${townname} `;
                });
                Text = `${townStrings.join('、')}降雨引发地质突害的可能性极大(红色预警)`;
            }
            return Text;
        },
        onClose() {
            this.yjqfxShow = false;
            this.yjqdjShow = false;
            this.showSd = false;
            this.mbxgShow = false;
            this.yjSdDraw();
        },
        //手动绘图开启
        yjSdDraw() {
            this.clearLayer();
            // this.showSd = !this.showSd;
            if (this.yjqdjShow) {
                this.clearDraw();

                this.yjqdjShow = false;
            }
        },
        //修改预警区和手动绘制
        allGridArea(yjtype) {
            // console.log(yjtype);
            console.log(this.sdzfgridAreaArr, 'check');
            this.YJMap.interaction.cancelDraw();
            this.YJMap.interaction.addYjDraw('Polygon', yjtype);
            this.drawYjCoors();
            this.drawType = yjtype;
            this.drawing = true;
            this.isdraw = false;
            this.issd = true;
        },
        drawYjCoors() {
            //获取绘制图层中的集合面的顶点坐标
            let geom = this.YJMap.interaction.getGeometryCollection();
            let geomSum = [];
            geom.forEach(item => {
                geomSum.push(...item.getCoordinates());
            });
            console.log(geomSum, 'geomSum');
            // console.log("Jsondata", JSONData.features[0].geometry.coordinates, "JSONData")
            //与账号所属的行政面相交
            let border = JSONData.features[0].geometry.coordinates;
            // let border = JSON.parse(localStorage.getItem("xzqhGeom"));
            let poly2 = turf.polygon([border[0]]);
            // let poly2 = JSONData;
            let yjFeatureSum = [];
            //             geomSum.forEach((item) => {
            //                 console.log(item, 'item');
            //         let poly1 = turf.polygon([item]);
            //         console.log(poly1,"poly1", poly2,"poly2");
            //         console.log(turf.isValid(poly1));
            // console.log(turf.isValid(poly2));
            //         let intersection = turf.intersect(poly1, poly2);
            //         let coor = intersection.geometry.coordinates;
            //         let arr = [];
            //         coor.forEach(function (item, index) {
            //           let coors = item.map((coord, index) => {
            //             return {
            //               lat: coord[1],
            //               lon: coord[0],
            //             };
            //           });
            //           arr.push(coors);
            //         });
            //         yjFeatureSum.push(...arr);
            //       });
            geomSum.forEach(item => {
                console.log(item, 'item');
                let poly1 = turf.polygon([item]);
                console.log(poly1, 'poly1', poly2, 'poly2');

                // 这里我们不再需要判断是否相交，直接处理每个item的坐标
                let coors = item.map((coord, index) => {
                    return {
                        lat: coord[1],
                        lon: coord[0],
                    };
                });
                yjFeatureSum.push(coors);
            });

            //对绘制完的几个面进行拼接
            let yjAfterSum = yjFeatureSum.map(item => {
                let lonlat = item.map(item1 => {
                    return `${item1.lon} ${item1.lat}`;
                });
                return `${this.drawType}-${lonlat.join(';')}`;
            });
            if (this.drawing) this.sdzfgridAreaArr.push(yjAfterSum);
            this.YJMap.interaction.cleargeometryCollection();
        },
        draw() {
            this.drawing = true;
            if (!this.drawing) {
                this.$message.warning('请先选择颜色绘制！');
                return;
            }
            this.mapLoading = true;
            this.drawYjCoors();
            console.log([...this.sdzfgridAreaArr], 'before*');
            this.sdzfgridArea = [...this.sdzfgridAreaArr].join('*');
            this.drawing = false;
            this.YJMap.interaction.cancelYjDraw();
            console.log('this.showSd', this.showSd);
            if (this.showSd) {
                console.log('手动绘图------');
                this.sdupdateGridArea();
            } else if (this.yjqdjShow) {
                console.log('修改预警区------');
                this.updateGridArea();
            }
        },
        updateGridArea() {
            let area = this.sdzfgridArea;
            // this.sdzfgridAreaBf=area
            if (area.endsWith('*')) {
                area = area.slice(0, -1);
            }
            area = area.replace(/,/g, '*');
            console.log(area, 'area');
            let exampledata = `methodName=hnshfxshort&postdata=xinjiang|updategrid|dzdq20240617200000|${area}`;
            updateGrid(exampledata).then(res => {
                //更新图层
                if (res.code == 200) {
                    this.$message.success('修改成功');
                    // this.removeLayer();
                    // this.clearLayer();
                    this.addPolygon();
                    // this.clearDraw();
                    // this.sdzfgridArea = '';
                    // this.mapLoading = false;
                } else {
                    this.mapLoading = false;
                    this.$message.error('失败');
                }
            });
        },
        sdupdateGridArea() {
            console.log(this.sdzfgridAreaBf, 'beforearea');
            let area = `${this.sdzfgridArea}*${this.sdzfgridAreaBf}`;
            this.sdzfgridAreaBf = area;
            //避免尾部有*的情况
            if (area.endsWith('*')) {
                area = area.slice(0, -1);
            }
            area = area.replace(/,/g, '*');
            console.log(area, 'afterarea');
            let exampledata = `methodName=hnshfxshort&postdata=xinjiang|updategrid|csh|${area}`;
            sdupdateGrid(exampledata).then(res => {
                //更新图层
                if (res.code == 200) {
                    this.mapLoading = false;
                    this.$message.success('分析成功');
                    let polygons = res.data.map(item => {
                        let pos = [];
                        let points = item.posArr.map(item => {
                            pos.push(item.lon + ' ' + item.lat);
                            return [item.lon, item.lat];
                        });
                        return {
                            codenumber: item.codenumber,
                            color: item.color,
                            level: item.level,
                            points: points,
                            pos: pos, //预警区分析区域点集
                            type: 0, //预警区分析type
                            lon: item.lon,
                            lat: item.lat,
                        };
                    });
                    this.gridArea = polygons;
                    this.YJMap.layer.addGridArea(polygons);
                    this.yjImgPath = res.message;
                    this.sdzfgridArea = '';
                    this.YJMap.interaction.cleargeometryCollection();
                } else {
                    this.$message.error('失败');
                }
            });
        },
        //清除预警区
        clearDraw() {
            this.sdzfgridAreaBf = '';
            if (this.showSd) {
                this.YJMap.interaction.cancelYjDraw();
                this.sdzfgridArea = '';
                this.sdzfgridAreaArr = [];
                this.clearLayer();
                // console.log(this.sdzfgridAreaArr, "this.sdzfgridArea");
            } else if (this.yjqdjShow) {
                this.sdzfgridArea = '';
                this.sdzfgridAreaArr = [];
                this.YJMap.interaction.cancelYjDraw();
            }
        },
        removeLayer() {
            let layer = this.YJMap.map
                .getLayers()
                .getArray()
                .find(layer => layer.get('layerName') === '手动绘制图层');
            // 移除图层
            layer.getSource().clear();
        },
        clearLayer() {
            this.YJMap.interaction.clearDraw();
            // this.$refs.mapTool.tipVisable = false;
            //清除站点
            this.qxfxyjLayer && this.qxfxyjLayer.getSource().clear();
            this.qxfxjcLayer && this.qxfxjcLayer.getSource().clear();
        },
        fbyjProduct() {
            yjfbProduct('650000').then(res => {
                console.log('预警发布');
            });
        },

        //获取风险监测中地址灾害风险的数据
        async getGeologicalDisasterThreshold(e) {
            this.jcTitleShow = false;
            this.jcLegendShow = false;
            const { option, color } = this.getOptionAndColor(this.value3, e);
            const res = await geologicalDisasterThreshold(option);
            console.log(res);
            const source = new VectorSource({});
            const area = turf.polygon(xinjiangArea.features[0].geometry.coordinates);
            res.data.length &&
                res.data.forEach(item => {
                    const flag = turf.booleanPointInPolygon(
                        turf.point([item.latitude, item.longitude]),
                        area
                    );
                    if (!flag) {
                        return;
                    }
                    const feature = new Feature({
                        geometry: new Point([item.latitude, item.longitude]),
                    });
                    for (let key in item) {
                        feature.set(key, item[key]);
                    }
                    feature.setStyle(
                        new Style({
                            image: new Circle({
                                fill: new Fill({
                                    color: color,
                                }),
                                // radius:item.value != null ? item.value / 10 : 10,
                                radius: 5,
                            }),
                        })
                    );
                    source.addFeature(feature);
                });
            const layer = new VectorLayer({
                source,
                zIndex: 20,
                name: '风险预警-风险监测-地质灾害风险',
            });
            const map = this.$store.getters.Map.map;
            const targetLayer = map
                .getAllLayers()
                .find(item => item.get('name') == '风险预警-风险监测-地质灾害风险');
            if (targetLayer) {
                map.removeLayer(targetLayer);
            }
            map.addLayer(layer);
        },

        //山洪灾害风险
        async getMountainTorrentsThreshold(e) {
            this.jcTitleShow = false;
            this.jcLegendShow = false;
            const { option, color } = this.getOptionAndColor(this.value2, e);
            const res = await mountainTorrentsThreshold(option);
            console.log(res);
            const source = new VectorSource({});
            const area = turf.polygon(xinjiangArea.features[0].geometry.coordinates);
            res.data.list.length &&
                res.data.list.forEach(item => {
                    const flag = turf.booleanPointInPolygon(
                        turf.point([item.latitude, item.longitude]),
                        area
                    );
                    if (!flag) {
                        return;
                    }
                    const feature = new Feature({
                        geometry: new Point([item.latitude, item.longitude]),
                    });
                    for (let key in item) {
                        feature.set(key, item[key]);
                    }
                    feature.setStyle(
                        new Style({
                            image: new Circle({
                                fill: new Fill({
                                    color: color,
                                }),
                                // radius:item.value != null ? item.value / 10 : 10,
                                radius: 5,
                            }),
                        })
                    );
                    source.addFeature(feature);
                });
            const layer = new VectorLayer({
                source,
                zIndex: 20,
                name: '风险预警-风险监测-山洪预警风险',
            });
            const map = this.$store.getters.Map.map;
            const targetLayer = map
                .getAllLayers()
                .find(item => item.get('name') == '风险预警-风险监测-山洪预警风险');
            if (targetLayer) {
                map.removeLayer(targetLayer);
            }
            map.addLayer(layer);
        },

        //中小河流洪水风险
        async getRiverThreshold(e) {
            this.jcTitleShow = false;
            this.jcLegendShow = false;
            const { option, color } = this.getOptionAndColor(this.value1, e);
            const res = await riverThreshold(option);
            console.log(res);
            const source = new VectorSource({});
            const area = turf.polygon(xinjiangArea.features[0].geometry.coordinates);
            res.data.length &&
                res.data.forEach(item => {
                    // console.log(item.latitude, item.longitude,'中小河流');
                    const feature = new Feature({
                        geometry: new Point([item.latitude, item.longitude]),
                    });
                    for (let key in item) {
                        feature.set(key, item[key]);
                    }
                    feature.setStyle(
                        new Style({
                            image: new Circle({
                                fill: new Fill({
                                    color: color,
                                }),
                                radius: item.value != null ? item.value / 10 : 10,
                            }),
                        })
                    );
                    source.addFeature(feature);
                });
            const layer = new VectorLayer({
                source,
                zIndex: 20,
                name: '风险预警-风险监测-中小河流洪水风险',
            });
            const map = this.$store.getters.Map.map;
            const targetLayer = map
                .getAllLayers()
                .find(item => item.get('name') == '风险预警-风险监测-中小河流洪水风险');
            if (targetLayer) {
                map.removeLayer(targetLayer);
            }
            map.addLayer(layer);
        },

        //地质灾害
        async getGeologicalDisasterPicture(e) {
            this.jcTitleShow = false;
            this.jcLegendShow = false;
            const innerHTML = e.target.innerHTML.trim();
            const option = {};
            if (innerHTML == '隐患点分布图') {
                option.geologicalDisasterType = '1';
            } else if (innerHTML == '滑坡崩塌易发程度区划图') {
                option.geologicalDisasterType = '2';
            } else if (innerHTML == '泥石流易发程度区划图') {
                option.geologicalDisasterType = '3';
            }
            const area = turf.polygon(xinjiangArea.features[0].geometry.coordinates);
            const color =
                this.levelWithColor[parseInt(Math.random() * this.levelWithColor.length)].engKey;
            const source = new VectorSource({});
            const res = await geologicalDisasterPicture(option);
            const map = this.$store.getters.Map.map;
            if (option.geologicalDisasterType == '2' || option.geologicalDisasterType == '3') {
                const url = res.msg;
                const imageLayer = new Image({
                    source: new ImageStatic({
                        url: url,
                        imageExtent: [73, 10, 135, 53],
                    }),
                    name: '风险监测-地质灾害-滑坡崩塌易发程度区划图',
                    zIndex: 20,
                });
                const targetLayer = map
                    .getAllLayers()
                    .find(item => item.get('name' == '风险监测-地质灾害-滑坡崩塌易发程度区划图'));
                if (targetLayer) {
                    map.removeLayer(targetLayer);
                }
                map.addLayer(imageLayer);
                return;
            }
            res.data &&
                res.data.length &&
                res.data.forEach(item => {
                    const flag = turf.booleanPointInPolygon(
                        turf.point([item.longitude, item.latitude]),
                        area
                    );
                    if (!flag) {
                        return;
                    }
                    const feature = new Feature({
                        geometry: new Point([item.longitude, item.latitude]),
                    });
                    for (let key in item) {
                        feature.set(key, item[key]);
                    }
                    feature.setStyle(
                        new Style({
                            image: new Circle({
                                fill: new Fill({
                                    color: color,
                                }),
                                radius: item.value ? item.value / 10 : Math.random() * 10,
                            }),
                        })
                    );
                    source.addFeature(feature);
                });
            const layer = new VectorLayer({
                source,
                name: '风险预警-风险监测-地质灾害',
                zIndex: 20,
            });
            const targetLayer = map
                .getAllLayers()
                .find(item => item.get('name') == '风险预警-风险监测-地质灾害');
            if (targetLayer) {
                map.removeLayer(targetLayer);
            }
            map.addLayer(layer);
        },

        //山洪灾害
        async getMountainTorrentsPicture(e) {
            this.jcLegendShow = false;
            this.jcTitleShow = false;
            const innerHTML = e.target.innerHTML.trim();
            const option = {};
            if (innerHTML == '防治区划图') {
                option.mountainTorrentsType = '1';
            } else if (innerHTML == '隐患点分布图') {
                option.mountainTorrentsType = '2';
            }
            const area = turf.polygon(xinjiangArea.features[0].geometry.coordinates);
            const res = await mountainTorrentsPicture(option);
            const color =
                this.levelWithColor[parseInt(Math.random() * this.levelWithColor.length)].engKey;
            const source = new VectorSource({});
            //添加图片
            const map = this.$store.getters.Map.map;
            if (option.mountainTorrentsType == '1') {
                const url = res.msg;
                const imageLayer = new Image({
                    source: new ImageStatic({
                        url: url,
                        imageExtent: [73, 10, 135, 53],
                    }),
                    zIndex: 20,
                    name: '风险监测-山洪灾害-防治区划图',
                });
                const targetLayer = map
                    .getAllLayers()
                    .find(item => item.get('name') == '风险监测-山洪灾害-防治区划图');
                if (targetLayer) {
                    map.removeLayer(targetLayer);
                }
                map.addLayer(imageLayer);
                return;
            }
            res.data &&
                res.data.length &&
                res.data.forEach(item => {
                    const flag = turf.booleanPointInPolygon(
                        turf.point([item.longitude, item.latitude]),
                        area
                    );
                    if (!flag) {
                        return;
                    }
                    const feature = new Feature({
                        geometry: new Point([item.longitude, item.latitude]),
                    });
                    for (let key in item) {
                        feature.set(key, item[key]);
                    }
                    feature.setStyle(
                        new Style({
                            image: new Circle({
                                fill: new Fill({
                                    color: color,
                                }),
                                radius: item.value ? item.value : Math.random() * 10,
                            }),
                        })
                    );
                    source.addFeature(feature);
                });
            const layer = new VectorLayer({
                source,
                name: '风险预警-风险监测-山洪灾害',
                zIndex: 20,
            });
            const targetLayer = map
                .getAllLayers()
                .find(item => item.get('name') == '风险预警-风险监测-山洪灾害');
            console.log(targetLayer);
            if (targetLayer) {
                map.removeLayer(targetLayer);
            }
            map.addLayer(layer);
        },
        //
        //设置option和颜色
        getOptionAndColor(value, e) {
            const innerHTML = e.target.innerHTML;
            //固定值
            const hIndex = innerHTML.indexOf('h');
            const timeArr = innerHTML.trim().split('h');
            const option = {};
            if (hIndex == innerHTML.trim().length) {
                option.dynamicType = '2';
                option.level = '';
            }
            //动态值
            else {
                option.dynamicType = '1';
                option.level = this.levelWithColor
                    .find(item => item.key == timeArr[1])
                    .value.toString();
            }
            option.time = timeArr[0];
            option.region = value == '0' ? '2' : '1';
            console.log(option);
            const color =
                option.dynamicType == '1'
                    ? this.levelWithColor.find(item => item.key == timeArr[1]).engKey
                    : this.levelWithColor[parseInt(Math.random() * this.levelWithColor.length)]
                          .engKey;
            return {
                option,
                color,
            };
        },
    },
};
</script>

<style lang="scss" scoped>
button {
    border: none !important;
}
button:active,
button:focus {
    outline: none !important;
    border: none !important;
}
::-webkit-scrollbar {
    display: none;
}
// 滚动条宽度
::v-deep .scrollable-table::-webkit-scrollbar {
}
// 滚动条轨道
::v-deep .scrollable-table::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
}
// 小滑块
::v-deep .scrollable-table::-webkit-scrollbar-thumb {
    background: #40a0ff49;
    border-radius: 10px;
}
::v-deep .scrollable-table::-webkit-scrollbar-thumb:hover {
    background: #40a0ff49;
}
::v-deep .el-table .el-table__body-wrapper {
    background-color: rgba(51, 117, 153, 0.773);
    overflow: hidden;
}
::v-deep .el-table .el-table__body-wrapper {
    background-color: rgba(51, 117, 153, 0.773);
}
::v-deep .el-table th.el-table__cell {
    background-color: transparent;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent;
}
::v-deep .el-table tr {
    background-color: transparent;
    color: #fff;
}
::v-deep .el-table tr:hover {
    background-color: #2394ff !important;
    color: #fff;
}
.scrollable-table {
    height: 150px; /* 设置你想要的高度 */
    overflow: auto; /* 设置溢出时显示滚动条 */
    border-collapse: collapse;
}
.list-item:hover {
    background-color: #2394ff !important;
}

.list-item:focus {
    background-color: #2394ff !important;
}

.el-collapse {
    position: absolute;
    z-index: 1;
    right: 10px;
    top: -30px;
    width: 450px;
    border: 0;
    :deep(.el-collapse-item__header) {
        height: 30px;
        font-size: 16px;
        background-color: rgba(8, 46, 82, 0.8);
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        background-image: url('../../assets/images/panel/panel-bottom-left.png');
        background-repeat: no-repeat;
        background-size: 100%;
        color: #fff;
    }
    .gradient-text {
        background: -webkit-linear-gradient(#fff, #528abe);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    :deep(.el-collapse-item__wrap) {
        background-color: rgba(8, 46, 82, 0.8);
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        padding: 0 15px;
        .detail-box {
            ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            p {
                margin: 0;
            }
            color: #fff;
            .head-part {
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                input {
                    vertical-align: middle;
                    margin-top: -2px;
                    margin-right: 5px;
                }
            }
            .footer-part {
                .river3 ul li {
                    width: 70px !important;
                }
                .sh1 ul li {
                    width: 100px !important;
                }
                & > div:nth-child(1) {
                    display: flex;
                    margin: 5px 0;
                    p {
                        width: 90px;
                    }
                    ul {
                        flex: 1;
                        display: flex;
                        justify-content: space-between;
                        li {
                            width: 73px;
                            height: 28px;
                            background-color: #3c6485;
                            text-align: center;
                            line-height: 28px;
                            &.on {
                                background-color: #2394ff;
                            }
                        }
                    }
                }
                & > div:nth-child(2) {
                    display: flex;
                    margin: 5px 0;
                    p {
                        width: 90px;
                    }
                    ul {
                        padding-right: 10px;
                        flex: 1;
                        display: flex;
                        justify-content: space-between;
                        li {
                            width: 76px;
                            height: 28px;
                            background-color: #3c6485;
                            text-align: center;
                            line-height: 28px;
                        }
                    }
                    .icon {
                        width: 30px;
                        height: 28px;
                        text-align: center;
                        line-height: 28px;
                        background-color: #3c6485;
                    }
                    .icon:hover {
                        background-color: #2394ff;
                    }
                    .icon:focus {
                        background-color: #2394ff;
                    }
                }
                & > div:nth-child(3) {
                    display: flex;
                    margin: 5px 0;
                    p {
                        width: 90px;
                    }
                    ul {
                        flex: 1;
                        display: flex;
                        justify-content: space-between;
                        li {
                            width: 73px;
                            height: 28px;
                            background-color: #3c6485;
                            text-align: center;
                            margin-right: 1px;
                            line-height: 28px;
                        }
                    }
                    .icon {
                        width: 30px;
                        height: 28px;
                        text-align: center;
                        line-height: 28px;
                        background-color: #3c6485;
                    }
                    .icon:hover {
                        background-color: #2394ff;
                    }
                    .icon:focus {
                        background-color: #2394ff;
                    }
                }
                & > div:nth-child(4) {
                    display: flex;
                    margin: 5px 0;
                    p {
                        width: 90px;
                    }
                    ul {
                        flex: 1;
                        display: flex;
                        justify-content: space-between;
                        li {
                            width: 154px;
                            height: 28px;
                            background-color: #3c6485;
                            text-align: center;
                            margin-right: 1px;
                            line-height: 28px;
                        }
                    }
                    .icon {
                        width: 30px;
                        height: 28px;
                        text-align: center;
                        line-height: 28px;
                        background-color: #3c6485;
                    }
                    .icon:hover {
                        background-color: #2394ff;
                    }
                    .icon:focus {
                        background-color: #2394ff;
                    }
                }
            }
        }
    }
    .fxyj-form {
        padding-top: 10px;
        ::v-deep .el-form-item__label {
            color: #ccc;
        }
        ::v-deep .el-radio__label {
            color: #ccc;
        }
        ::v-deep .el-input__inner {
            background-color: #3c6485;
            border: 0;
            border-radius: 0;
            color: #fff;
        }
        ::v-deep .el-radio-group .el-radio {
            margin-right: 11px !important;
        }
        ::v-deep .el-radio__label {
            font-size: 12px !important;
        }
        ::v-deep .el-radio__inner {
            width: 12px;
            height: 12px;
            vertical-align: middle;
            margin-top: -3px;
        }
        ::v-deep .el-checkbox-group {
            display: flex;
            flex-direction: column;
            background: #3c6485;
            max-height: 100px;
            overflow-y: auto;
            padding-left: 10px;
        }
        // 滚动条宽度
        ::v-deep .el-checkbox-group::-webkit-scrollbar {
            width: 6px;
        }
        // 滚动条轨道
        ::v-deep .el-checkbox-group::-webkit-scrollbar-track {
            background: rgb(239, 239, 239);
            border-radius: 2px;
        }
        // 小滑块
        ::v-deep .el-checkbox-group::-webkit-scrollbar-thumb {
            background: #40a0ff49;
            border-radius: 10px;
        }
        ::v-deep .el-checkbox-group::-webkit-scrollbar-thumb:hover {
            background: #40a0ff49;
        }
        ::v-deep .el-checkbox {
            color: #ccc;
        }
    }
    ::v-deep .el-table {
        overflow-y: auto;
    }
    //弹窗通用样式
    .dialog-box {
        position: absolute;
        bottom: 0;
        background-color: rgba(8, 46, 82, 0.8);
        .title {
            display: flex;
            justify-content: space-between;
            color: #fff;
            align-items: center;
            background-image: url('../../assets/images/panel/panel-bottom-left.png');
            background-repeat: no-repeat;
            background-size: cover;
            padding: 0 10px;
            height: 36px;
            h3 {
                margin: 0;
                font-size: 16px;
                font-weight: normal;
            }
        }
        .closeDialog:hover {
            color: #2394ff;
        }
        .drawButton {
            // color: #2394ff ;
            border: none;
        }
        // .drawButton:hover{
        // 	// color: #2394ff ;
        // 	border:none;
        // }
    }
    .jcTitle {
        background-color: rgba(8, 46, 82, 0.8);
        width: 375px;
        height: 33px;
        left: -36vw;
        top: 2vh;
        color: white;
        text-align: center;
        font-size: 1rem;
        position: absolute;
    }
    .jcLegend {
        display: flex;
        position: absolute;
        left: -30vw;
        bottom: -25vh;
        .legend-item {
            // margin-right: 10px; /* 调整子项之间的间距 */
            text-align: center;
            width: 7rem;
            background-color: white;
        }
        .legend-text {
            font-size: 12px;
            line-height: 0.5rem;
            padding-top: 1px;
        }
        .legend-color {
            width: 100%; /* 背景颜色块的宽度 */
            height: 10px; /* 背景颜色块的高度 */
            margin-top: 5px; /* 文字与颜色块之间的间距 */
        }
    }
    // 预警区分析小弹窗
    .yjqsx-dialog {
        width: 288px;
        height: 236px;
        left: -298px;
        .table-box {
            width: 100%;
            overflow: auto;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            .yjTable {
                background-color: #2a587d;
            }
            table {
                width: 90%;
                tr {
                    height: 32px;
                    &:first-child {
                        td {
                            background-color: #2a587d;
                        }
                    }
                    td {
                        text-align: center;
                        color: #fff;
                        background-color: #193b55;
                    }
                }
            }
        }
    }
    // 预警词小弹窗
    .yjc-dialog {
        width: 288px;
        height: 236px;
        left: -298px;
        .table-box {
            width: 100%;
            overflow: auto;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            .panel {
                margin-top: 1rem;
                ::v-deep .el-input__inner {
                    width: 4rem;
                    background: rgba(16, 106, 171, 0.8470588235) !important;
                    background-color: rgba(16, 106, 171, 0.8470588235) !important;
                    border: 1px solid rgba(0, 255, 255, 0.4) !important;
                    color: #fff !important;
                }
                width: 100%;
                height: 100%;
                padding: 10px;
                .panel-top {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .panel-item .panel-body {
                    background: rgba(1, 79, 115, 0.6);
                    color: #0ff;
                    font-size: 1.4rem;
                }
                .panel-body-con {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    .panel-body-item {
                        display: flex;
                        align-items: center;
                        margin: 1rem 2rem;
                    }
                    .el-select {
                        width: 22rem;
                    }
                    .el-date-picker {
                        width: 20rem;
                    }
                }
                .btn-list {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                    .btn-list-item {
                        position: relative;
                        width: 9rem;
                        height: 9rem;
                        border: 1px solid #66ffff7f;
                        background: #00ffff19;
                        border-radius: 5px;
                        backdrop-filter: blur(10px);
                        color: #ffffff;
                        &:hover {
                            cursor: pointer;
                            color: #00ffff;
                            background: #00ffff36;
                        }
                        img {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            width: 5rem;
                            height: 5rem;
                        }
                        .btn-list-item-title {
                            width: 100%;
                            position: absolute;
                            text-align: center;
                            bottom: 1rem;
                        }
                    }
                }
            }
        }
    }
    .wgxg-dialog,
    .fxct-dialog {
        width: 300px;
        left: -310px;
        ul {
            list-style: none;
            color: #fff;
            display: flex;
            margin: 10px 0;
            padding: 0;
            justify-content: space-around;
            li {
                width: 50px;
                height: 25px;
                font-size: 14px;
                text-align: center;
                line-height: 25px;
                border-radius: 4px;
                border: 1px solid #000;
            }
        }
        .btn {
            display: flex;
            justify-content: space-evenly;
            margin: 10px 0;
            button {
                width: 83px;
                height: 25px;
                color: #fff;
                background-color: #3cbcc8;
                border: 0;
                border-radius: 4px;
            }
        }
    }
}
.active {
    background-color: #2394ff !important;
}
</style>
